mixin rowHeading(items)
  thead
    tr
      each item in items
        th= item

mixin numberCell(title, number)
  td.number(data-title=title)= number

mixin sizeCell(title, size)
  td.number(data-title=title, data-value= size)= h.size.format(size)

- const crux = pageInfo.data.crux.pageSummary;
- const metrics = {round_trip_time: 'Round Trip Time (RTT)', experimental_time_to_first_byte: 'Time To First Byte (TTFB)', first_contentful_paint:'First Contentful Paint (FCP)', largest_contentful_paint: 'Largest Contentful Paint (LCP)', cumulative_layout_shift: 'Cumulative Layout Shift (CLS)', interaction_to_next_paint: 'Interaction to Next Paint (INP)'}; 
- const experiences = ['loadingExperience','originLoadingExperience'];

if experiences
  small 
    || 
    each experience in experiences
      if crux[experience]
        each formFactor in Object.keys(crux[experience])
          a(href='#' + experience + '-' + formFactor) #{experience} #{formFactor} |
          | &nbsp;|&nbsp;

  a#crux
  h2 CrUx
  p.small Chrome User Experience Report (CrUx) is powered by real user measurement across the public web, aggregated from users who have opted-in to syncing their browsing history, have not set up a Sync passphrase, and have usage statistic reporting enabled and is using Chrome.

  p.small The CrUx data has four different buckets (form factor) depending on device: DESKTOP, PHONE, TABLET and ALL. You can choose which data to get with 
    code --crux.formFactor
    | .

  each experience in experiences
    if experience === 'loadingExperience' && crux[experience]
      p Over the last 30 days, this is the field data for this page for Chrome users.
    else if crux[experience]
      h4 All pages served from this origin
      p This is a summary of all pages served from this origin over the last 30 days for Chrome users.

    if crux[experience]
      each formFactor in Object.keys(crux[experience])
        if (crux[experience][formFactor] && crux[experience][formFactor].data)
          a(id=experience + '-' + formFactor)
          h3 Form Factor #{formFactor}
          - const collectionPeriod = crux[experience][formFactor].data.record.collectionPeriod;
          p Data collected between #{collectionPeriod.firstDate.year}-#{collectionPeriod.firstDate.month}-#{collectionPeriod.firstDate.day} and #{collectionPeriod.lastDate.year}-#{collectionPeriod.lastDate.month}-#{collectionPeriod.lastDate.day}
          table
            thead
              tr
                th Metric
                th Value
            tbody
              each name, key in metrics
                if crux[experience][formFactor].data.record.metrics[key]
                  tr
                    td #{name} 75 percentile
                    td #{key.indexOf('cumulative') > -1 ? crux[experience][formFactor].data.record.metrics[key].percentiles.p75 :  h.time.ms(crux[experience][formFactor].data.record.metrics[key].percentiles.p75)} 
          
          if crux[experience][formFactor].FORM_FACTORS_FRACTIONS
            h4 Form factors
            table
              thead 
                tr
                  th Form factor
                  th Value
              tbody
                tr 
                  td Desktop
                  td #{Number(crux[experience][formFactor].FORM_FACTORS_FRACTIONS.desktop *100).toFixed(2)}%
                tr 
                  td Phone
                  td #{Number(crux[experience][formFactor].FORM_FACTORS_FRACTIONS.phone *100).toFixed(2)}%
                tr 
                  td Tablet
                  td #{Number(crux[experience][formFactor].FORM_FACTORS_FRACTIONS.tablet *100).toFixed(2)}%


          if crux[experience][formFactor].NAVIGATION_TYPES_FRACTIONS
            h4 Navigation types
            table 
              thead
                tr
                  th Navigation type
                  th Value 
              tbody
                tr
                  td Navigate 
                  td  #{Number(crux[experience][formFactor].NAVIGATION_TYPES_FRACTIONS.navigate *100).toFixed(2)}%
                tr
                  td Navigate cache
                  td  #{Number(crux[experience][formFactor].NAVIGATION_TYPES_FRACTIONS.navigate_cache *100).toFixed(2)}%
                tr
                  td Reload
                  td  #{Number(crux[experience][formFactor].NAVIGATION_TYPES_FRACTIONS.reload *100).toFixed(2)}%
                tr
                  td Restore
                  td  #{Number(crux[experience][formFactor].NAVIGATION_TYPES_FRACTIONS.restore *100).toFixed(2)}%
                tr
                  td Back/Forward
                  td  #{Number(crux[experience][formFactor].NAVIGATION_TYPES_FRACTIONS.back_forward *100).toFixed(2)}%
                tr
                  td Back/Forward cache
                  td  #{Number(crux[experience][formFactor].NAVIGATION_TYPES_FRACTIONS.back_forward_cache *100).toFixed(2)}%
                tr
                  td Prerender
                  td  #{Number(crux[experience][formFactor].NAVIGATION_TYPES_FRACTIONS.prerender *100).toFixed(2)}%

          if crux[experience][formFactor].LCP_RESOURCE_TYPES_FRACTIONS
              h4 Largest Contentful Paint resource type
              table
                thead
                  tr
                    th Element type
                    th Value
                tbody
                  tr
                    td Text
                    td #{Number(crux[experience][formFactor].LCP_RESOURCE_TYPES_FRACTIONS.text *100).toFixed(2)}%
                  tr
                    td Image
                    td #{Number(crux[experience][formFactor].LCP_RESOURCE_TYPES_FRACTIONS.image *100).toFixed(2)}%
              h4 Largest Contentful Paint image extra information
              table
                thead
                  tr
                    th Metric
                    th 75 p
                tbody
                  tr
                    td Largest Contentful Paint
                    td #{h.time.ms(crux[experience][formFactor].LARGEST_CONTENTFUL_PAINT_MS.p75)}
                  if crux[experience][formFactor].LCP_IMAGE_RESOURCE_LOAD_DURATION_MS
                    tr
                      td Image load duration
                      td #{h.time.ms(crux[experience][formFactor].LCP_IMAGE_RESOURCE_LOAD_DURATION_MS.p75)}
                  if crux[experience][formFactor].LCP_IMAGE_RESOURCE_LOAD_DELAY_MS
                    tr
                      td Image load delay
                      td #{h.time.ms(crux[experience][formFactor].LCP_IMAGE_RESOURCE_LOAD_DELAY_MS.p75)}
                  if crux[experience][formFactor].LCP_IMAGE_ELEMENT_RENDER_DELAY_MS
                    tr
                      td Image render delay
                      td #{h.time.ms(crux[experience][formFactor].LCP_IMAGE_ELEMENT_RENDER_DELAY_MS.p75)}
                  if crux[experience][formFactor].LCP_IMAGE_TTFB_MS
                    tr
                      td Image TTFB
                      td #{h.time.ms(crux[experience][formFactor].LCP_IMAGE_TTFB_MS.p75)}
          h4 Distribution
          - let cruxus = `${experience}.${formFactor}.data.record.metrics`;
          - let FCPs = [Number(get(crux, `${cruxus}.first_contentful_paint.histogram[0].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.first_contentful_paint.histogram[1].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.first_contentful_paint.histogram[2].density`, 0)*100).toFixed(2)];

          - let LCPs = [Number(get(crux, `${cruxus}.largest_contentful_paint.histogram[0].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.largest_contentful_paint.histogram[1].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.largest_contentful_paint.histogram[2].density`, 0)*100).toFixed(2)];

          - let CLSs = [Number(get(crux, `${cruxus}.cumulative_layout_shift.histogram[0].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.cumulative_layout_shift.histogram[1].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.cumulative_layout_shift.histogram[2].density`, 0)*100).toFixed(2)];

          - let TTFBs = [Number(get(crux, `${cruxus}.experimental_time_to_first_byte.histogram[0].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.experimental_time_to_first_byte.histogram[1].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.experimental_time_to_first_byte.histogram[2].density`, 0)*100).toFixed(2)];

          - let ITNPs = [Number(get(crux, `${cruxus}.interaction_to_next_paint.histogram[0].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.interaction_to_next_paint.histogram[1].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.interaction_to_next_paint.histogram[2].density`, 0)*100).toFixed(2)];

          - let RTTs = [Number(get(crux, `${cruxus}.round_trip_time.histogram[0].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.round_trip_time.histogram[1].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.round_trip_time.histogram[2].density`, 0)*100).toFixed(2)];

          script(type='text/javascript').
            document.addEventListener("DOMContentLoaded", function() {   

                  function drawPie(id, series, labels) {
                    new Chartist.Pie(id, {
                      series,
                      labels,
                    }, {
                      showLabel: false,
                      plugins: [
                        Chartist.plugins.legend(
                          { 
                            clickable: false,
                            position: 'bottom'
                          }
                        )
                    ]
                    });
                  }     
                  
                  drawPie('#chartFCP#{experience + formFactor}', [#{FCPs}], ['Fast: #{FCPs[0]}%', 'Moderate #{FCPs[1]}%', 'Slow: #{FCPs[2]}%']);
                  drawPie('#chartLCP#{experience + formFactor}', [#{LCPs}], ['Fast: #{LCPs[0]}%', 'Moderate #{LCPs[1]}%', 'Slow: #{LCPs[2]}%']);
                  drawPie('#chartCLS#{experience + formFactor}', [#{CLSs}], ['Good: #{CLSs[0]}%', 'Need improvement: #{CLSs[1]}%', 'Poor: #{CLSs[2]}%']);
                  drawPie('#chartTTFB#{experience + formFactor}', [#{TTFBs}], ['Good: #{TTFBs[0]}%', 'Need improvement: #{TTFBs[1]}%', 'Poor: #{TTFBs[2]}%']);
                  drawPie('#chartITNP#{experience + formFactor}', [#{ITNPs}], ['Good: #{ITNPs[0]}%', 'Need improvement: #{ITNPs[1]}%', 'Poor: #{ITNPs[2]}%']);
                  drawPie('#chartRTT#{experience + formFactor}', [#{RTTs}], ['Low: #{RTTs[0]}%', 'Medium: #{RTTs[1]}%', 'High: #{RTTs[2]}%']);

            });
          .responsive  
            table
              tr
                th #{metrics['round_trip_time']}
                th #{metrics['experimental_time_to_first_byte']}
              tr 
                td(data-title=metrics['round_trip_time'])
                  .ct-chart(id='chartRTT' + experience + formFactor)
                td(data-title=metrics['experimental_time_to_first_byte']) 
                  .ct-chart(id='chartTTFB' + experience + formFactor) 
              tr
                th #{metrics['first_contentful_paint']}
                th #{metrics['largest_contentful_paint']}            
              tr 
                td(data-title=metrics['first_contentful_paint'])  
                  .ct-chart(id='chartFCP' + experience + formFactor)
                td(data-title=metrics['largest_contentful_paint']) 
                  .ct-chart(id='chartLCP' + experience + formFactor)
              tr
                th #{metrics['interaction_to_next_paint']}
                th #{metrics['cumulative_layout_shift']}
              tr
                td(data-title=metrics['interaction_to_next_paint']) 
                  .ct-chart(id='chartITNP' + experience + formFactor)
                td(data-title=metrics['cumulative_layout_shift']) 
                  .ct-chart(id='chartCLS' + experience + formFactor)
                
else 
  p No data availible in the Chrome User Experience report.